<template>
	<div
		v-if="item"
		class="flex items-center gap-1 h-9 px-2 rounded-lg text-t-1 app-bg-react"
		:class="{ 'bg-primary': isActive }">
		<base-amount
			class="w-[150px] flex-shrink-0"
			:class="Number(item.freeAmount) > 0 ? '' : 'text-t-2'"
			:value="item.freeAmount"
			:currency="item.currency"
			hide-currency />
		<base-currency class="w-4 flex-shrink-0" :currency="item.currency" />
		<n-ellipsis v-bind="NBind.Ellipsis">{{ item.appName || item.currency }}</n-ellipsis>
	</div>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue'
import { NEllipsis } from 'naive-ui'
import { BaseAmount, BaseCurrency } from '@/components/base'
import { NBind } from '@/plugins/naive-ui.ts'
import { useWalletStore } from '@/store'
import { BalanceItem } from '@/types'

const props = defineProps({
	item: {
		type: Object as PropType<BalanceItem>
	}
})

const walletStore = useWalletStore()

const isActive = computed(() => {
	return props.item?.currency === walletStore.walletConfig.selectedCryptoCurrency
})
</script>

<style scoped></style>
